<template>
  <!-- artivles.vue 专用组件 -->
  <div class="container" v-if="articlessaddhowDialog">
    <el-dialog
      :title="titleForm.id ? '修改技巧' : '新增技巧'"
      :visible="articlessaddhowDialog"
      width="50%"
      @close="closeadd"
    >
      <el-form
        :model="titleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <!-- 文章标题 -->
        <el-form-item label="文章标题" prop="title">
          <el-input
            placeholder="请输入文章标签"
            v-model="titleForm.title"
          ></el-input>
        </el-form-item>

        <!-- 富文本--标题内容 -->
        <el-form-item label="文章内容" prop="articleBody">
          <quil
            v-if="titleForm.articleBody"
            :content="titleForm.articleBody"
            ref="quilform"
          ></quil>
          <!-- @getContext="getContext" -->
        </el-form-item>

        <!-- 视频地址 -->
        <el-form-item label="视频地址" prop="videoURL">
          <el-input
            placeholder="请输入视频地址"
            v-model="titleForm.videoURL"
          ></el-input>
        </el-form-item>
      </el-form>

      <!-- 取消和确认按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import quil from "./articles-quill.vue";
import { add } from "../../api/hmmm/articles";

export default {
  components: { quil },
  props: {
    articlessaddhowDialog: {
      type: Boolean,
      default: false, //默认
    },
    articlesdeatil: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      titleForm: {
        title: "", //标题内容
        videoURL: "", //视频地址
        articleBody: "", //富文本框的值
      },
      rules: {
        title: [
          { required: true, message: "文章标题不能为空", trigger: "blur" },
        ],
        //富文框的值
        articleBody: [
          { required: true, message: "文章内容不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    cancel() {
      //校验通过
      this.$refs.ruleForm.validate((isok) => {
        if (isok) {
          this.confirm();
        }
      });
    },
    //确认按钮
    async confirm() {
      this.$refs.quilform.btn();

      this.titleForm.articleBody = this.$refs.quilform.reason;
      await add(this.titleForm);
      this.$message.success("保存成功");
      // this.articlessaddhowDialog = false;
      this.$emit("update:articlessaddhowDialog", false);
      this.$parent.getArticles();
      this.titleForm = {
        title: "", //标题内容
        videoURL: "", //视频地址
        articleBody: "", //富文本框的值
      };
    },
    closeadd() {
      this.$emit("update:articlessaddhowDialog", false);
      this.titleForm = {
        title: null, //标题内容
        videoURL: "", //视频地址
        articleBody: "", //富文本框的值
      };
    },
    //取消按钮
    cancel() {
      this.$emit("update:articlessaddhowDialog", false);
      this.$confirm("确认取消吗？");
    },
  },
  created() {
    this.titleForm = {};
    this.titleForm = this.articlesdeatil;
    this.$parent.getArticles();
  },
};
</script>

<style scoped lang="less"></style>

